<script lang="ts" setup>
// 查询菜单列表
import {ref, onMounted} from "vue";
import api from "@/axios.js";
import router from "@/router/index.js";

interface SysFun {
  nodeId?: Number,
  displayName?: String,
  childList?: SysFun[],
  nodeURL?: String
}

onMounted(() => {
  selSysFun(); // 调用该方法
})

let menuList = ref<SysFun[]>([]);

function selSysFun() {
  api({url: "/selSysFunByRoleId"}).then(resp => {
    // 将后端返回的数据赋给vue
    menuList.value = resp.data;
  });
}

// 点击节点触发
const handleNodeClick = (data: any) => {
  if (data.nodeURL == null)
    return;
  if (data.nodeURL != "")
    router.push(data.nodeURL);
}

const defaultProps = {
  children: 'childList',
  label: 'displayName',
}
</script>

<template>
  <el-tree class="el-tree-sysFun"
           v-model:data="menuList"
           :props="defaultProps"
           @node-click="handleNodeClick"
           :default-expand-all='true'
  />
</template>

<style scoped>
.el-tree-sysFun {
  background-color: #303030;
  color: #11d3ff;
}

</style>